<template>
	<view class="" style="background-color: #F5F5F5;height: 100vh;">
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
			      <navigator open-type="navigateBack">
			        <image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
			      </navigator>
			      <text>选择城市</text>
			      <!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			  </view>
		</view>
		<view class="top1 topnext">
			<view class="center">
				<image class="centerimg" src="https://x.bilinmeiju.com/static/sqgl/yjjx.png" mode=""></image>
				<input class="centerinput" type="text" placeholder="请输入城市名称" placeholder-style="color=#F4652F">
			</view>
		</view>
		<view class="box">
			<view class="box0">
				<view class="box1">
					<view class="box1-1">
						当前定位
					</view>
					<view class="box1-2" v-if="city">
						{{city}}
					</view>
					<view v-if="!city">
						正在定位...
					</view>
				</view>
				<image class="box1-1img" src="https://x.bilinmeiju.com/static/sqgl/changxian.png" mode=""></image>
				<view class="zimoadd">
					A
				</view>
				<view class="box2" @click="xiaoquxz" v-for="(item,index) in list" :key="index">
					<view class="box2-1">{{item}}</view>
					<view class="box2xian">

					</view>
				</view>


			</view>

			<view class="zimo">
				<view class="zimoadd" v-for="(item,index) in zimoarr" :key="index">
					{{item}}
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				CustomBar: 0,
				top:0,
				zimoarr: [],
				list: ['阿克苏地区', '阿尔山', '阿尔卑斯', '阿来拿', '阿克苏市', '阿克苏市'],
				city:'',
				bartop:0
			}
		},
		onLoad() {
			that = this;
			that.bartop = that.$bartop;
			for (var i = 0; i < 26; i++) {
				this.zimoarr.push(String.fromCharCode(65 + i))
			}
			
			wx.getLocation({
			 type: 'wgs84',
			 
			 complete(e) {
			 	const latitude = e.latitude
			 	const longitude = e.longitude
				that.$post('api/getcity',{lng:longitude,lat:latitude}).then(res=>{
					console.log(res);
					that.city = res.data.shi;
					uni.setStorageSync('city',res.data.shi);
					uni.setStorageSync('lnglat',res.data.lng+','+res.data.lat);
				})
			 }
			})


		},
		methods: {
			fanhui() {
				uni.navigateBack()
			},
			xiaoquxz() {
				uni.navigateTo({
					url: '/pages/shequgeli/xiaooquxuanze'
				})
			}
		}
	}
</script>

<style>
	body {
		background-color: antiquewhite;
	}

	.beijing {
		width: 100vw;
		height: 174rpx;
		z-index: 1;
		position: absolute;
		top: 0;
	}

	.top {
		width: 700rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		/* align-items: flex-end; */
	}

	.toptext {
		z-index: 2;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
		line-height: 20rpx;
	}

	.top1 {
		/* margin-top: 50rpx; */
	}

	.top1img {
		z-index: 2;
		width: 20rpx;
		height: 36rpx;
	}

	.center {
		width: 720rpx;
		margin: 0 auto;
		padding-top: 35rpx;
	}

	.centerimg {
		width: 712rpx;
		height: 90rpx;

	}

	.centerinput {
		margin-top: -80rpx;
		margin-left: 40rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #F4652F;
		line-height: 20rpx;
		opacity: 0.5;
	}

	.zimo {
		width: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zimoadd {
		width: 30rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		text-align: center;
		color: #FE7C04;
		line-height: 40rpx;
	}

	.box {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
	}

	.box0 {
		width: 630rpx;
	}

	.box1 {
		width: 630rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.box1-1 {
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
	}

	.box1-1img {
		width: 630rpx;
		height: 4px;
		margin: 20rpx;
	}

	.box1-2 {
		background-color: #F4652F;
		border-radius: 30rpx;
		width: 120rpx;
		height: 60rpx;
		color: white;
		text-align: center;
		line-height: 60rpx;
	}

	.box2 {
		height: 90rpx;
	}

	.box2-1 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 90rpx;
		color: #333333;
	}

	.box2xian {
		width: 626rpx;
		height: 1px;
		background: #D4D4D4;
		opacity: 0.37;
	}
</style>
